<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html >
<html>
<%
	String path = request.getContextPath();
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/script/easyUI-1.4/themes/icon.css">
<script type="text/javascript"
	src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>
	
	<script type="text/javascript">
    jQuery(function(){
        $('#tt').treegrid({    
            url:"<%=path%>/servlet/treeGridData",    
            method: 'post',
            lines: true,
            rownumbers: true,
            //定义关键字段来标识树节点
            idField: 'dept_id',
            //treeField属性定义哪个字段显示为树形菜单
            treeField: 'dept_name',
            
            columns:[[    
                {title:'部门名称',field:'dept_name',width:180},    
                {title:'平均薪水',field:'salary',width:60,align:'right'},    
                {title:'部门地址',field:'address',width:80}  
            ]]    
        });  
        
        
        //选项卡
        $('#tabs').tabs({    
            border:false,    
            tools:[{
        		iconCls:'icon-add',
        		handler:function(){
        			$('#tabs').tabs('add',{
        				title: '插入的选项卡面板',
        				selected:false,
        				content:"<iframe src='<%=path%>/edit.jsp' border='0' frameborder='0' width='100%'></iframe>",
        			});
        		}
        	},{
        		iconCls:'icon-save',
        		handler:function(){
        		}
        	}]

        });  

        
    });
</script>
	
</head>


<body class="easyui-layout">

<div id="tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">   
     <div id="tt" ></div>  
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">   
        tab3    
    </div>   
</div>  

</body>
</html>